<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{height:100%;margin: 0;padding:0;overflow: hidden;}
    .cont{width: 90%;height: 90%;background: #000;margin:  10px auto;position: relative;}
    .fire{width:10px;height:20px;position: absolute;}
    .s_fire{width:10px;height:10px;position: absolute;border-radius: 50%;}
  </style>
</head>
<body>
  <div class="cont"></div>
</body>
<script src="./move.js"></script>
<script>

  class Fire{
    constructor( { type, now, target, cont, className } ){
      this.type = type;
      this.className = className;
      this.now = now;
      this.target = target;
      this.cont = cont;
      this.ele = document.createElement("div");
      this.init();
    }
    init(){
      this.ele.className = this.className;
      this.ele.style.left = this.now.left + "px";
      this.ele.style.top = this.now.top + "px";
      this.ele.style.background = randomRGB();
      this.cont.appendChild(this.ele);
      this.move();
    }
    move(){
      move(this.ele, this.target, ()=>{
        this.ele.remove();
        if(this.type === 0){
          // 随机半径
          const r = random(100, 200);
          // 随机数量
          const num = random(10,20)
          for(let i=0;i<num;i++){
            // 根据当前元素的角度，计算弧度
            const hu = Math.PI / 180 * (360 / num * i);
            new Fire({
              type: 1,
              now: this.target,
              target: {
                // 利用三角函数公式，计算left和top
                // 注意取整
                left: parseInt(Math.sin(hu) * r + this.target.left),
                top: parseInt(Math.cos(hu) * r + this.target.top)
              },
              cont: this.cont,
              className: "s_fire"
            });
          }
        }
      });
    }
  }

  const cont = document.querySelector(".cont")
  cont.onclick = function(eve){
    const e = eve || window.event;
    new Fire({
      type: 0,
      now: {
        left: e.offsetX,
        top: cont.offsetHeight
      },
      target: {
        left: e.offsetX,
        top: e.offsetY
      },
      cont,
      className: "fire"
    })
  }

  function random(a,b){
    return Math.round(Math.random()*(a-b)+b);
  }

  function randomRGB(){
    return `rgb(${random(150,255)},${random(150,255)},${random(150,255)})`;
  }


</script>
</html>